input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
  cursor: pointer;
}
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  /* outline: thin dotted; 
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; */
}

.radio-group{// checkbox or radio group mask
	margin-bottom: 9px;
	label{
		font-weight: 400;
		cursor: pointer;
		max-width: 100%;
		margin-right: 12px;
		input[type="radio"],
        input[type="checkbox"]{
        	margin: 0 6px;
        	position: relative;
        	top: 2px;
        }
	}
	small{
    	vertical-align: bottom;
    	color: #828282;
    }
}
.radio-group-style{
	margin-bottom: 25px;
	label{
		margin-right: 12px;
		margin-bottom: 25px;
		cursor: pointer;
		i{
			width: 20px;
			height: 20px;
			background: url(../img/radios.png) no-repeat -63px -7px;
			@include inline-block;
			position: relative;
			top: -2px;
		}
		span{
			color: #CED6DD;
		}
		input{
			display: none;
			&:checked + i{
				background-position: -15px -7px;
			}
			&:checked + i + span{
				color: #fff;
			}
		}
	}
}
.radio-group-style-green{
	label{
		i{
			background: url(../img/radios_green.png) no-repeat -63px -7px;
		}
	}
	/* input{
		display: none;
		&:checked + i{
			background-position: -6px -8px;
		}
		&:checked + i + span{
			color: $yellow;
		}
	} */
}
.radio-group-style-yellow{
    label{
        i{
            background: url(../img/radios_yellow.png) no-repeat -63px -7px;
        }
    }
}
.checkbox-group{// checkbox or radio group mask
	margin-bottom: 9px;
	label{
		padding-left: 20px;
		font-weight: 400;
		cursor: pointer;
		max-width: 100%;
		position: relative;
		@include inline-block;
		input[type="radio"],
        input[type="checkbox"]{
        	margin-left: -16px;
        	position: absolute;
        	margin-top:3px;
        }
	}
}
.checkbox-group-style{
	margin-bottom: 25px;
	label{
		margin-right: 12px;
		margin-bottom: 25px;
		cursor: pointer;
		i{
			width: 20px;
			height: 20px;
			background: url(../img/checkbox.png) no-repeat -58px -4px;
			@include inline-block;
			position: relative;
			top: -1px;
		}
		span{
            color: #fff;
		}
		input{
			display: none;
			&:checked + i{
				background-position: -19px -4px;
			}
			/* &:checked + i + span{
				color: $yellow;
			} */
		}
	}
}
.checkbox-group-style-yellow{
    label{
        i{
            background: url(../img/checkbox_yellow.png) no-repeat -58px -4px;
        }
    }
}
.checkbox-group-style-default{
    label{
        i{
            background: url(../img/checkbox_normal.png) no-repeat -55px -4px;
        }
        
        span{
            color: #CED6DD;
        }
        input{
            &:checked + i + span{
                color: #fff;
            }
        }
    }
}
.radio-group-more,
.checkbox-group-more{// more than one checkbox or radio group mask
	label{
		margin-right: 16px;
	}
}